<template>
  <div id="tmpl">
      <!-- 1.0实现商品的轮播图 -->
      <div class="silder">
      <silder :imgs="list"></silder>
      </div>
      <!-- 2.0实现商品购买区 -->
      <div id='buy'>
        <h4 v-text='info.title'></h4>
        <p class='line'></p>
        <ul>
          <li class='price'>
            市场价：<s>￥{{info.market_price}}</s>  销售价：<span>￥{{info.sell_price}}</span>
          </li>
          <li class="inputli">
            购买数量：<inputnumber v-on:dataobj="getcount" class='inputnumber'></inputnumber>
            <transition name="show" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
                <div v-if='isshow' class='ball'></div>
            </transition> 
          </li>
          <li>
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small" @click="toshopcar">加入购物车</mt-button>
          </li>
        </ul>
      </div>
      <div id="params">
        <h6>商品参数</h6>
        <p class='line'></p>
        <ul>
          <li>商品货号：{{info.goods_no}}</li>
          <li>库存情况：{{info.stock_quantity}}</li>
          <li>上架时间：{{info.add_time|datefmt('YYYY-MM-DD')}}</li>
        </ul>
      </div>
      <!-- 图文详情   商品评论 -->
      <div id="other">
      <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
        <mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
      </router-link>
      <router-link v-bind="{to:'/goods/goodscomment/'+id}">
        <mt-button type="danger" size="large">商品评论</mt-button>
      </router-link>
      </div>
  </div>
</template>
<script>
import common from "../../common/common.js";
import silder from "../subcom/silder.vue";
import inputnumber from "../../components/subcom/inputnumber.vue";
import {vm,COUNTSTR} from "../../common/vm.js";
import {setItem,valueObj} from "../../common/localSg.js";
  export default {
    components:{silder,inputnumber},
    data(){
      return {
        isshow:false,
        id:0,
        list:[],
        info:{},
        inputNumberCount:1
      }
    },
    created(){
      this.id=this.$route.params.id;
      this.getlist();
      this.getinfo();
    },
    methods:{
      beforeEnter(el){
        el.style.transform="translate(0px,0px)"
      },
      enter(el,done){
        el.offsetWidth;
        el.style.transform='translate(75px,366px)';
        done();
      },
      afterEnter(el){
        this.isshow=!this.isshow;
      },
      getcount(count){
        this.inputNumberCount=count;
      },
      getlist(){
        var url=common.apidomain+'/api/getthumimages/'+this.id;
        this.$http.get(url).then(function(res){
          var data=res.body;
          this.list=data.message;
        })
      },
      getinfo(){
        var url=common.apidomain+'/api/goods/getinfo/'+this.id;
        this.$http.get(url).then(function(res){
          this.info=res.body.message[0]
        })
      },
      toshopcar(){
        vm.$emit(COUNTSTR,this.inputNumberCount);
        valueObj.goodsid=this.id;
        valueObj.count=this.inputNumberCount;
        setItem(valueObj);

        this.isshow=!this.isshow
      }
    }
  }
</script>
<style scoped>
.silder{
   border:1px solid rgba(0,0,0,0.4);
   border-radius: 5px;
   margin: 5px;
 }

  #buy,#params,#other
  {
    margin: 5px;
    padding: 5px;
    border:1px solid rgba(0,0,0,0.4);
    border-radius: 5px;
  }
 .line{
    height: 1px;
    border: 1px solid rgba(0,0,0,0.2);
  }
  #buy ul,#params ul{
    padding-left: 0px;
  }
 #buy h4{
   color:#0094ff;
  padding: 5px;
 }
 #buy li,#params li{
   list-style: none;
   padding: 8px;
 }

  #buy .price span{
    color:red;
  }

  #other .imgdesc{
    margin-bottom: 20px;
  }
  .inputli{
    position: relative;
  }
  .inputnumber{
    position: absolute;
    left:100px;
    top:5px;
  }

  .ball{
    background-color: red;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    left:150px;
    top:10px;
    transition: all 0.4s ease;
    z-index: 100;
  }
</style>